<template>
  <a-drawer
    :title="formInfo.id==undefined?'新增':'修改'"
    :maskClosable="true"
    :width="drawerWidth"
    placement="right"
    :closable="true"
    @close="handleCancel"
    :destroyOnClose="true"
    :visible="visible"
    style="height: calc(100% - 25px);overflow: auto;padding-bottom: 53px;">
    <a-spin :spinning="confirmLoading">
      <a-form-model
        ref="ruleForm"
        :model="formInfo"
        :label-col="$global.labelCol"
        :wrapper-col="$global.wrapperCol"
      >
            <a-row>
                <a-col :span="24">
                    <a-form-model-item label="编号" prop="no" :rules="$valid.required" :maxLength="50">
                        <a-input v-model="formInfo.no" placeholder="请输入编号"/>
                    </a-form-model-item>
                </a-col>

                  <a-col :span="24">
            <a-form-model-item label="年度" prop="year" :rules="$valid.required" :maxLength="50">
              <a-input v-model="formInfo.year" type="number" :min="2010" placeholder="请输入年度"/>
            </a-form-model-item>
          </a-col>
            </a-row>
                <a-row>
              <a-col :span="24">
            <a-form-model-item label="项目类别" prop="types" :rules="$valid.required" :maxLength="50">
                <a-select v-model="formInfo.types" placeholder="请选择项目类别" >
                    <a-select-option v-for="(item) in this.$sysDictOptions('repairTypes')" :key="item.k" :value="parseInt(item.k)">
                        {{ item.v }}
                    </a-select-option>
                </a-select>
            </a-form-model-item>
          </a-col>
                    <a-col :span="24">
                        <a-form-model-item label="项目名称" prop="name" :rules="$valid.required" :maxLength="50">
                            <a-input v-model="formInfo.name" placeholder="请输入名称"/>
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="24">
                        <a-form-model-item label="项目类型" prop="equType"  :maxLength="50">
                            <a-tree-select
                                    multiple
                                    v-model="formInfo.equType"
                                    style="width: 100%"
                                    :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                                    :tree-data="typeTree"
                                    placeholder="请选择"
                            >
                            </a-tree-select>
                        </a-form-model-item>
                    </a-col>
            </a-row>
                <a-row>
              <a-col :span="24">
            <a-form-model-item label="地点" prop="roomValue"  :maxLength="50">
                <a-cascader
                        v-if="optionsRoom.length"
                        v-model="roomValue"
                        :options="optionsRoom"
                        @change="handleChange"
                        change-on-select
                        placeholder="请选择地址"
                />
            </a-form-model-item>
          </a-col>
                    <a-col :span="24">
                        <a-form-model-item label="地点明细" prop="address"  :maxLength="50">
                            <a-input v-model="formInfo.address" placeholder="请输入地点明细"/>
                        </a-form-model-item>
                    </a-col>
                  <a-col :span="24">
            <a-form-model-item label="可研评审文号" prop="fsReviewNumber"  :maxLength="50">
              <a-input v-model="formInfo.fsReviewNumber" placeholder="请输入可研评审文号"/>
            </a-form-model-item>
          </a-col>
            </a-row>
                <a-row>
              <a-col :span="24">
            <a-form-model-item label="可研批复时间" prop="fsAppTime"  :maxLength="50">
                <a-date-picker
                        v-model="formInfo.fsAppTime"
                        inputReadOnly
                        type="date"
                        valueFormat="YYYY-MM-DD"
                        format="YYYY-MM-DD"
                        placeholder="请选择可研批复时间"
                        style="width: 100%;"
                />
            </a-form-model-item>
          </a-col>
                  <a-col :span="24">
            <a-form-model-item label="可研批复文号" prop="fsAppNumber" :maxLength="50">
              <a-input v-model="formInfo.fsAppNumber" placeholder="请输入可研批复文号"/>
            </a-form-model-item>
          </a-col>
            </a-row>
                <a-row>
              <a-col :span="24">
            <a-form-model-item label="可研批复估算" prop="fsAppEst"  :maxLength="50">
              <a-input v-model="formInfo.fsAppEst" placeholder="请输入可研批复估算"/>
            </a-form-model-item>
          </a-col>
                  <a-col :span="24">
            <a-form-model-item label="初设评审文号" prop="priReviewNumber"  :maxLength="50">
              <a-input v-model="formInfo.priReviewNumber" placeholder="请输入初设评审文号"/>
            </a-form-model-item>
          </a-col>
            </a-row>
                <a-row>
              <a-col :span="24">
            <a-form-model-item label="初设批复时间" prop="priAppTime"  :maxLength="50">
                <a-date-picker
                        v-model="formInfo.priAppTime"
                        inputReadOnly
                        type="date"
                        valueFormat="YYYY-MM-DD"
                        format="YYYY-MM-DD"
                        placeholder="请选择初设批复时间"
                        style="width: 100%;"
                />
            </a-form-model-item>
          </a-col>
                  <a-col :span="24">
            <a-form-model-item label="初设批复文号" prop="priAppNumber"  :maxLength="50">
              <a-input v-model="formInfo.priAppNumber" placeholder="请输入初设批复文号"/>
            </a-form-model-item>
          </a-col>
            </a-row>
                <a-row>
              <a-col :span="24">
            <a-form-model-item label="初设批复估算" prop="priAppEst"  :maxLength="50">
              <a-input v-model="formInfo.priAppEst" placeholder="请输入初设批复估算"/>
            </a-form-model-item>
          </a-col>
            </a-row>

          <a-row>
              <a-col :span="24">
                  <a-form-model-item    label="可研建设必要性">
                      <a-input v-model="formInfo.fsremark" type="textarea" style="height: 100px"/>
                  </a-form-model-item>
              </a-col>
          </a-row>
          <a-row>
              <a-col :span="24">
                  <a-form-model-item   label="可研内容">
                      <a-input v-model="formInfo.fsContent" type="textarea" style="height: 100px"/>
                  </a-form-model-item>
              </a-col>
          </a-row>
          <a-row>
              <a-col :span="24">
                  <a-form-model-item   label="初设内容">
                      <a-input v-model="formInfo.priContent" type="textarea" style="height: 100px"/>
                  </a-form-model-item>
              </a-col>
          </a-row>

      </a-form-model>
    </a-spin>
    <div class="drawer-bootom-button">
      <a-popconfirm title="确定放弃编辑？" @confirm="handleCancel" okText="确定" cancelText="取消">
        <a-button style="margin-right: .8rem">取消</a-button>
      </a-popconfirm>
      <a-button @click="handleSubmit" type="primary" :loading="confirmLoading">提交</a-button>
    </div>
  </a-drawer>
</template>

<script>
  import { getAction, postAction } from '@/api/manage'
  export default {
    name: 'EquRepairEdit',
    components: {
    },
    data () {
      return {
        visible: false,
        confirmLoading: false,
          typeTree:[],
        formInfo: {
          name: undefined,
          year: undefined,
          types: undefined,
          no: undefined,
          addressId: undefined,
          buildingId: undefined,
          floorId: undefined,
          roomId: undefined,
          address: undefined,
          fsReviewNumber: undefined,
          fsAppTime: undefined,
          fsAppNumber: undefined,
          fsAppEst: undefined,
          priReviewNumber: undefined,
          priAppTime: undefined,
          priAppNumber: undefined,
          priAppEst: undefined,
          fsremark: undefined,
          fsContent: undefined,
          priContent: undefined,
          departCode: undefined,
          createTime: undefined,
          sortOrder: undefined,
          wx: ''
        },
          roomValue:[],
          optionsRoom:[],
        drawerWidth: 1200,
        url: {
          saveInfo: '/system/equRepair/save',
            listTree: '/system/devCampusBuildingFloorRoom/listTree',
            treelist: '/system/equType/tree',
          getInfo: '/system/equRepair/info'
        }
      }
    },
      created () {
          this.getRoomListTree()
          this.getTypeTree(true)
      },
    methods: {
      add () {
        this.edit()
      },
      edit (record) {
        this.$objToOverride(this.formInfo, record)
        if (this.formInfo.id) {
          getAction(this.url.getInfo, { 'id': record.id }).then(res => {
            this.$nextTick(() => {
              this.formInfo = res.result.data
                let roomValue=[]
                if(this.formInfo.addressId){
                    roomValue.push(this.formInfo.addressId+'')
                }
                if(this.formInfo.buildingId){
                    roomValue.push(this.formInfo.buildingId+'')
                }
                if(this.formInfo.floorId){
                    roomValue.push(this.formInfo.floorId+'')
                }
                if(this.formInfo.roomId){
                    roomValue.push(this.formInfo.roomId+'')
                }
                this.roomValue=roomValue
                if(this.formInfo.equType){
                    this.formInfo.equType = this.formInfo.equType.split(",")
                }
            })
          })
        }
        this.visible = true
      },
        getRoomListTree() {
            getAction(this.url.listTree).then((res) => {
                this.optionsRoom = res.result.data
            })
        },
        getTypeTree (firstFlag) {
            getAction(this.url.treelist,{}).then(res => {
                if (firstFlag) {
                    if(res.result.data[0].children) {
                        const treeLv2 = res.result.data[0].children.map((item, index, arr) => {
                            const treeLv2Tmp = (item.key)
                            return treeLv2Tmp
                        })
                        this.expandedKeys = treeLv2
                        expandedKeySource = treeLv2
                    }
                }
                this.typeTree = res.result.data
            })
        },
      // 确定
      handleSubmit () {
        // 触发表单验证
        this.confirmLoading = true
        this.$refs.ruleForm.validate(valid => {
          console.log(valid)
          if (valid) {
              if(this.formInfo.equType){
                  this.formInfo.equType = this.formInfo.equType.join(",")
              }
            postAction(this.url.saveInfo, this.formInfo).then(res => {
              this.$message.success(res.content)
              this.$emit('ok', this.formInfo)
              this.close()
            }).finally(() => {
              this.confirmLoading = false
            })
          } else {
            this.confirmLoading = false
          }
        })
      },
      // 关闭
      handleCancel () {
        this.close()
      },
      close () {
        this.$refs.ruleForm.resetFields()
        this.$objToReset(this.formInfo)
        this.$emit('close')
        this.visible = false
      },
      editorOk (val) {
        this.formInfo.content = val
      },
        // 值变化处理
        handleChange(value, selectedOptions) {
            console.log(value)
            this.formInfo.roomValue = value.join(",")
        }
    }
  }
</script>
